// 主题调色板

// 原主题预设变量
// 颜色
// $accentColor = #3eaf7c
// $textColor = #2c3e50
// $borderColor = #eaecef
// $codeBgColor = #282c34
// $arrowBgColor = #ccc
// $badgeTipColor = #42b983
// $badgeWarningColor = darken(#ffe564, 35%)
// $badgeErrorColor = #DA5961
// 布局
// $navbarHeight = 3.6rem
// $sidebarWidth = 20rem
// $contentWidth = 740px
// $homePageWidth = 960px
// 代码块
// $lineNumbersWrapperWidth = 3.5rem


@require './code-theme'

//***vdoing主题-变量***//

// 颜色

$bannerTextColor = #fff // 首页banner区(博客标题)文本颜色
$accentColor = #F9BF45
$activeColor = #ff5722
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 18rem
$contentWidth = 860px
$homePageWidth = 1100px
$rightMenuWidth = 230px // 右侧菜单

// 代码块
$lineNumbersWrapperWidth = 2.5rem

// 浅色模式
.theme-mode-light
  --bodyBg: #f4f4f4
  --mainBg: rgba(255,255,255,1)
  --sidebarBg: rgba(255,255,255,.8)
  --blurBg: rgba(255,255,255,.9)
  --customBlockBg: #f1f1f1
  --textColor: #00323c
  --textLightenColor: #0085AD
  --borderColor: rgba(0,0,0,.15)
  --codeBg: #f6f6f6
  --codeColor: #525252
  codeThemeLight()

// 深色模式
.theme-mode-dark
  --bodyBg: rgb(39,39,43)
  --mainBg: rgba(30,30,34,1)
  --sidebarBg: rgba(30,30,34,.8)
  --blurBg: rgba(30,30,34,.8)
  --customBlockBg: rgb(39,39,43)
  --textColor: rgb(155,155,170)
  --textLightenColor: #0085AD
  --borderColor: #2C2C3A
  --codeBg: #252526
  --codeColor: #fff
  codeThemeDark()

// 阅读模式
.theme-mode-read
  --bodyBg: rgb(236,236,204)
  --mainBg: rgba(245,245,213,1)
  --sidebarBg: rgba(245,245,213,.8)
  --blurBg: rgba(245,245,213,.9)
  --customBlockBg: rgb(236,236,204)
  --textColor: #704214
  --textLightenColor: #996633
  --borderColor: rgba(0,0,0,.15)
  --codeBg: #282c34
  --codeColor: #fff
  codeThemeDark()


// Colors
// colors for theme.
// --------------------------------------------------
$whitesmoke = #f5f5f5;
$grey-dark = #999;
$grey-dim = #666;
$black-light = #555;
$purple = #d68fe9;
$purple-dark = #b28fce;
$purple-dim = #986db2;
$purple-deep = #b854d4;
$brown = #795548;

// Scaffolding
// Settings for some of the most global styles.
// --------------------------------------------------

// Global text color on <body>
$text-color = $black-light;

// Global link color.
$link-color = $purple-deep;

// Selection
$selection-bg = $purple;
$selection-color = white;

// Panel
$panel-color = #5d3523;
$panel-bg-color = #fbf4f1;
$panel-theme-bg-from-color = #fbc2eb;
$panel-theme-bg-to-color = #a6c1ee;
$panel-theme-border = #ffe4d8;

// Text Clip
$text-clip-start = #fb618d;
$text-clip-center = #8dc00a;
$text-clip-end = $purple;

// Background
$bg-white = rgba(255, 255, 255, 0.5);
$bg-white-dim = rgba(255, 255, 255, 0.65);
$bg-white-deep = rgba(255, 255, 255, 0.8);
$bg-dark = rgba(0, 0, 0, 0.1);
$bg-dark-dim = rgba(0, 0, 0, 0.2);
$bg-dark-deep = rgba(0, 0, 0, 0.3);
$bg-aplayer = rgba(178, 143, 206, 0.65);
$bg-sp-color = #f4f8fb;
$bg-dark-line = rgba(0, 0, 0, 0.08);
$bg-tag-dark = rgba(0, 0, 0, 0.5);
$bg-tag-dark-deep = #000;

// Concat
$concat-email-color = $purple-dark;
$concat-github-color = #ffba84;
$concat-zhihu-color = #2ea9df;
$concat-music-color = #f596aa;

// Loading
$loading-bg = #aaaaaa;
$loading-color-one = #faaacc;
$loading-color-two = #c8aacc;
$loading-color-three = #96aacc;
$loading-color-four = #acd0ff;
$loading-color-five = #88cfff;

// Sakura
$sakura-color = #e87a90;
$sakura-color-light = #fedfe1;

// Code
$code-color-red = #fc625d;
$code-color-yello = #fdbc40;
$code-color-green = #35cd4b;

// Typography
// Font, line-height, and elements colors.
// --------------------------------------------------

// Font families.
$font-family-base = 'Fira Mono', 'Noto Serif SC', -apple-system, Roboto, Helvetica Neue, sans-serif;

// Font Weight
$font-weight-normal = 400;
$font-weight-bold = 700;

// Font size
$font-size-base = 14px;
$font-size-icon = 24px;
$font-size-code = $font-size-base - 1px;
$font-size-normal = $font-size-base + 1px;
$font-size-small = $font-size-base - 2px;
$font-size-large = $font-size-base + 2px;
$font-size-smaller = $font-size-base - 4px;
$font-size-larger = $font-size-base + 4px;

// Headings font size
$font-size-headings-step = 2px;
$font-size-headings-base = 24px;

// Global line height
$line-height-base = 1.6;
$line-height-block = 1.8;

// Z-index master list
// --------------------------------------------------
$zindex-bottom = -1;
$zindex-1 = 1;
$zindex-2 = 10;
$zindex-3 = 100;
$zindex-4 = 1000;

// Layout sizes
// --------------------------------------------------
$page-desktop = 876px;

// Padding sizes
// --------------------------------------------------
$card-padding-small = 8px 10px;
$card-padding = 12px 14px;
$card-padding-large = 14px 16px;
$code-padding = 12px 14px;

// Shadow
// --------------------------------------------------
$card-shadow = 0 0 2px 0 $bg-dark, 0px 2px 2px 0 $bg-dark-dim;
$card-shadow-hover = 0 10px 20px rgba(0, 0, 0, 0.16);
$card-shadow-base = 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24);
$card-shadow-base-hover = 0 10px 20px $bg-dark-dim, 0 6px 6px $bg-dark-deep;
$card-shadow-light = 0 14px 38px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.06);
$card-shadow-light-hover = 0 14px 38px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.12);
$block-shadow = #ccc 0px 10px 10px -10px inset, #ccc 0px -10px 10px -10px inset;
$img-shadow = rgba(0, 0, 0, 0.2) 0 10px 12px;

// Image Assets
// --------------------------------------------------
$mobile-bg = url('https://cdn.jsdelivr.net/gh/chanshiyucx/yoi/blog/mobile.jpg');
//$aplayer-bg = url('https://i0.hdslb.com/bfs/album/7c90130f1e780854b44e0b217c059ee6d4151087.png');
$aplayer-bg = url('https://i0.hdslb.com/bfs/album/7b67280cb151bdd83cca2a55f0ee1a14477d3b95.jpg@1e_1c.webp');
//$aplayer-bg = url('https://gitee.com/xlzy520/Rem/raw/master/pixiv/57747839.jpg');
$gitalk-bg = url('https://gitee.com/xlzy520/Rem/raw/master/pixiv/76332567.png');
$backtop-bg = url('https://cdn.jsdelivr.net/gh/chanshiyucx/yoi/blog/back-top.png');

// Transition
// --------------------------------------------------
$transition-base = all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;

// About
// --------------------------------------------------
$avatar-size-pc = 100px;
$avatar-size-sp = 80px;

$contact-size-pc = 54px;
$contact-size-sp = 48px;
